import { useState } from 'react'
import './JsxSyntax.css'

function JsxSyntax() {
  const [name, setName] = useState('React')
  const [count, setCount] = useState(0)

  return (
    <div className="example-page">
      <div className="example-header">
        <h1>JSX 语法</h1>
        <p>学习 React 的模板语法，了解如何在 JavaScript 中编写类似 HTML 的代码</p>
      </div>

      <div className="example-section">
        <h2>1. 基本语法</h2>
        <p>JSX 允许你在 JavaScript 中编写类似 HTML 的语法：</p>
        
        <div className="code-block">
{`// JSX 语法
const element = <h1>Hello, World!</h1>

// 编译后的 JavaScript
const element = React.createElement('h1', null, 'Hello, World!')`}
        </div>

        <div className="demo-container">
          <div className="demo-title">基本 JSX 示例：</div>
          <div className="demo-content">
            <h3>你好, {name}!</h3>
            <p>当前计数: {count}</p>
          </div>
        </div>
      </div>

      <div className="example-section">
        <h2>2. 表达式嵌入</h2>
        <p>在 JSX 中使用大括号 {} 嵌入 JavaScript 表达式：</p>
        
        <div className="code-block">
{`const user = { name: '张三', age: 25 }
const element = (
  <div>
    <h1>用户信息</h1>
    <p>姓名: {user.name}</p>
    <p>年龄: {user.age}</p>
    <p>明年年龄: {user.age + 1}</p>
  </div>
)`}
        </div>

        <div className="demo-container">
          <div className="demo-title">表达式示例：</div>
          <div className="demo-content">
            <p>2 + 3 = {2 + 3}</p>
            <p>字符串长度: {'Hello React'.length}</p>
            <p>当前时间: {new Date().toLocaleTimeString()}</p>
            <p>随机数: {Math.random().toFixed(2)}</p>
          </div>
        </div>
      </div>

      <div className="example-section">
        <h2>3. 属性设置</h2>
        <p>JSX 中的属性使用驼峰命名法，class 变为 className：</p>
        
        <div className="code-block">
{`// 正确的属性写法
const element = (
  <div className="container">
    <img src="logo.png" alt="Logo" />
    <button onClick={handleClick}>点击我</button>
  </div>
)

// 错误的写法
// &lt;div class="container"&gt;  // 应该是 className
// <img src="logo.png" alt="Logo" />  // 正确
// &lt;button onclick={handleClick}&gt;点击我&lt;/button&gt;  // 应该是 onClick`}
        </div>

        <div className="demo-container">
          <div className="demo-title">属性示例：</div>
          <div className="demo-content">
            <input 
              type="text" 
              value={name}
              onChange={(e) => setName(e.target.value)}
              placeholder="输入你的名字"
              className="input-field"
            />
            <button 
              onClick={() => setCount(count + 1)}
              className="btn-primary"
            >
              点击计数 ({count})
            </button>
          </div>
        </div>
      </div>

      <div className="example-section">
        <h2>4. 条件渲染</h2>
        <p>使用 JavaScript 条件运算符在 JSX 中进行条件渲染：</p>
        
        <div className="code-block">
{`function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? (
        <h1>欢迎回来!</h1>
      ) : (
        <h1>请先登录</h1>
      )}
    </div>
  )
}

// 或者使用逻辑与运算符
function Notification({ message }) {
  return (
    <div>
      {message && <p>{message}</p>}
    </div>
  )
}`}
        </div>

        <div className="demo-container">
          <div className="demo-title">条件渲染示例：</div>
          <div className="demo-content">
            {count > 5 ? (
              <p style={{ color: 'green' }}>计数大于 5！</p>
            ) : (
              <p style={{ color: 'blue' }}>计数小于等于 5</p>
            )}
            
            {name && (
              <p>你好, <strong>{name}</strong>!</p>
            )}
          </div>
        </div>
      </div>

      <div className="example-section">
        <h2>5. 列表渲染</h2>
        <p>使用 map() 方法渲染列表：</p>
        
        <div className="code-block">
{`const items = ['苹果', '香蕉', '橙子']

function FruitList() {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  )
}`}
        </div>

        <div className="demo-container">
          <div className="demo-title">列表渲染示例：</div>
          <div className="demo-content">
            <ul>
              {['React', 'Vue', 'Angular', 'Svelte'].map((framework, index) => (
                <li key={index}>{framework}</li>
              ))}
            </ul>
          </div>
        </div>
      </div>

      <div className="example-section">
        <h2>6. JSX 片段</h2>
        <p>使用 Fragment 或空标签 &lt;&gt; 包裹多个元素：</p>
        
        <div className="code-block">
{`// 使用 Fragment
import { Fragment } from 'react'

function App() {
  return (
    <Fragment>
      <h1>标题</h1>
      <p>段落</p>
    </Fragment>
  )
}

// 使用空标签（简写）
function App() {
  return (
    <>
      <h1>标题</h1>
      <p>段落</p>
    </>
  )
}`}
        </div>

        <div className="demo-container">
          <div className="demo-title">Fragment 示例：</div>
          <div className="demo-content">
            <>
              <span>第一个元素</span>
              <span> | </span>
              <span>第二个元素</span>
              <span> | </span>
              <span>第三个元素</span>
            </>
          </div>
        </div>
      </div>

      <div className="example-section">
        <h2>7. 样式设置</h2>
        <p>在 JSX 中设置内联样式和 CSS 类：</p>
        
        <div className="code-block">
{`// 内联样式
const element = (
  <div style={{ 
    backgroundColor: 'lightblue',
    fontSize: '16px',
    padding: '10px'
  }}>
    带样式的元素
  </div>
)

// CSS 类名
const element = (
  <div className="container active">
    带类名的元素
  </div>
)

// 动态类名
const isActive = true
const element = (
  <div className={isActive ? 'active' : 'inactive'}>
    动态类名
  </div>
)`}
        </div>

        <div className="demo-container">
          <div className="demo-title">样式示例：</div>
          <div className="demo-content">
            <div style={{ 
              backgroundColor: count > 5 ? '#d4edda' : '#f8d7da',
              padding: '10px',
              borderRadius: '5px',
              marginBottom: '10px'
            }}>
              动态背景色（基于计数）
            </div>
            <div className={count % 2 === 0 ? 'even' : 'odd'}>
              当前计数是 {count % 2 === 0 ? '偶数' : '奇数'}
            </div>
          </div>
        </div>
      </div>

      <div className="note">
        <strong>注意：</strong>
        <ul>
          <li>JSX 不是 HTML，它是 JavaScript 的语法扩展</li>
          <li>所有标签必须闭合，包括自闭合标签如 &lt;img /&gt; 和 &lt;br /&gt;</li>
          <li>使用驼峰命名法命名属性（className 代替 class）</li>
          <li>表达式必须用大括号 {} 包裹</li>
        </ul>
      </div>
    </div>
  )
}

export default JsxSyntax